<template>
  <!-- <div class="container"> -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/image/bgBigTwo1.jpg" class="d-block w-100" >
        </div>
        <div class="carousel-item">
          <img src="/image/bgBigTwo2.jpg" class="d-block w-100" alt="">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>
  <!-- </div> -->
  <!-- 中间介绍部分 -->
  <!-- <div>
    <div class="introduce">沾化智慧物业 以生活缴费、报事报修、业主表决、门禁管理等线上物业服务为基础，提供社区生活服务，全面打造智慧社区，开启面向移动互联的社区新生活。</div>
  </div> -->
  <div class="container model2">
    <div class="row rowcenter">
      <div class="col-sm-4 imgDiv col-6" v-for="item in dataList" :key="item.name">
        <img :src="item.src" alt="" class="img-circle imgImg">
        <div class="textP">
          <p class="Name"> {{item.name}} </p>
          <p class="contant"> {{item.contant}} </p>
        </div>
      </div>
    </div>
  </div>
  


</template>

<script lang='ts' setup>

 import {reactive} from 'vue'
const dataList = reactive([
  {
    src: '/image/智慧社区.png',
    name: '智慧社区（园区）',
    contant: '为社区（园区）智慧化提供整体的解决方案和运营服务'
  },
  {
    src: '/image/生活缴费.png',
    name: '生活缴费',
    contant: '业主查看账单，尊享优惠，足不出户，物业、水电缴费一键搞定'
  },
  {
    src: '/image/车辆管理.png',
    name: '车辆管理',
    contant: '智能管理业主车位，保护业主利益，整洁小区停车环境'
  },
  {
    src: '/image/智慧餐厅.png',
    name: '智慧餐厅',
    contant: '提高用餐效率，一码通行无感支付，便捷用餐'
  },
  {
    src: '/image/报事报修.png',
    name: '报事报修',
    contant: '实现物业与业主之间的高效沟通，提升业主满意度，提高物业服务水平'
  },
  {
    src: '/image/租赁管理.png',
    name: '租赁管理',
    contant: '帮助租赁行业实现精细化管理,全面提升企业的经营业绩，推动企业信息化建设'
  },
])

</script>

<style lang="less" scoped>
.kuang{
  background-color: rgb(255, 255, 255);
  .imageWai{
    background-image: -webkit-gradient(linear,left top,right top,from(#0d70e1),to(#64a6ff));
    // min-width: 1200px;
    background-position: 50%;
    height: 540px;
    background: url(/image/bgBig.png) no-repeat;
    background-size:cover;
    background-attachment:fixed;
    .imageDiv{

      .image{
        width: 600px;
        height: 100%;
        margin:  50px 0 0 100px;
      }
      .image2{
        width: 210px;
        height: 100%;
        margin:  0 0 0 130px;
      }
      .image3{
        width: 300px;
        height: 100%;
        margin:  -30px 0 0 50px;
      }
      .text{
        flex: 1;
        display: inline;
      }
    }
  }
}

.img1{
  max-height: 300px;
}
.img2{
  max-height: 400px;
}
.part3{
  color: white;
}

.row{
  display: flex;
  // justify-content: center;  // 中间
  // align-items: center;
}
.rowcenter{
  text-align: center;
}
.introduce
{
  font-size: 14px;
  // height: 50px;
  line-height: 30px;
  text-align: center;
  padding: 40px 30px 40px 30px;
}
.model2{
  margin: 20px auto;
}
.imgDiv{
  margin: 5px 0;
  
  .imgImg{
    // display: flex;
    // max-height: 50px;
    margin: 5px 0;
  }
  .textP{
    max-width: 200px;
    margin: 0 auto;
    .Name{
      font-size: 14px;
    }
    .contant{
      font-size: 12px;
    }
  }
}
@media (min-width: 420px){
  .imgImg{max-height: 50px;}
}
@media (max-width: 420px){
  .imgImg{max-height: 40px;}
}

@media (min-width: 420px){
  .imgDiv{margin: 25px 0;}
}
@media (max-width: 420px){
  .imgDiv{margin: 18px 0;}
}
@media (max-width: 420px){
  .model2{margin: 25px auto;}
}
</style>
